<!--省医疗保险办理-->
<template>
  <default-layout>
    <header-back text="省医疗保险办理" slot="header"></header-back>
    <div slot="main">
      <transition name="fade" mode="out-in">
        <div v-if="status === 'form'" key="form">
          <div class="form-list">
            <div class="form-list-item">
              <span class="label">姓名：</span>
              <span class="content">{{userInfo.aac003}}</span>
            </div>
            <div class="form-list-item">
              <span class="label">档案号：</span>
              <span class="content">{{userInfo.archiveCode}}</span>
            </div>
            <div class="form-list-item">
              <span class="label">身份证号：</span>
              <span class="content">{{userInfo.idCard}}</span>
            </div>
          </div>
          <div class="form">
            <yd-cell-group>
              <yd-cell-item>
                <span slot="left" class="label required">手机号：</span>
                <xf-input
                        slot="right"
                        :valid="[{required: true, msg: '请填写手机号'}, {reg: $regex.phone, msg: '手机号格式不正确'}]"
                        v-model="form.mobilePhone"
                        ref="mobilePhone"
                        placeholder="请填写联系电话"></xf-input>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">身份证材料：</span>
                <div class="img-box" slot="right">
                  <div class="img-box-item">
                    <upload-image
                            type="25"
                            file-name="身份证正面"
                            v-model="form.file1"
                            required="请上传身份证正面材料"
                            ref="file1"></upload-image>
                    <span class="tip">正面</span>
                  </div>
                  <div class="img-box-item">
                    <upload-image
                            required="请上传身份证反面材料"
                            ref="file2"
                            type="25"
                            file-name="身份证反面"
                            v-model="form.file2"></upload-image>
                    <span class="tip">反面</span>
                  </div>
                </div>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">社保卡：</span>
                <div class="img-box" slot="right">
                  <div class="img-box-item">
                    <upload-image
                      type="25"
                      file-name="社保卡正面"
                      v-model="form.file3"
                      required="请上传社保卡正面材料"
                      ref="file1"></upload-image>
                    <span class="tip">正面</span>
                  </div>
                  <div class="img-box-item">
                    <upload-image
                      required="请上传社保卡反面材料"
                      ref="file2"
                      type="25"
                      file-name="社保卡反面"
                      v-model="form.file4"></upload-image>
                    <span class="tip">反面</span>
                  </div>
                </div>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">养老权益单：</span>
                <div class="img-box" slot="right">
                  <div class="img-box-item">
                    <upload-image
                            required="请上传养老权益单图片"
                            ref="file3"
                            type="25"
                            file-name="养老权益单"
                            v-model="form.file5"></upload-image>
                    <span class="tip">养老权益单图片</span>
                  </div>
                </div>
              </yd-cell-item>
            </yd-cell-group>
          </div>
          <div class="submit">
            <mt-button size="large" type="primary" @click="onSubmit">提交预审</mt-button>
          </div>
        </div>
        <medical-success key="success" v-if="status === 'success'"></medical-success>
      </transition>
    </div>
    <transition name="router" mode="out-in">
      <router-view></router-view>
    </transition>
  </default-layout>
</template>
<script>
  import HeaderBack from '../../../components/header-back/header-back.vue'
  import UploadImage from '../../../components/upload-image/upload-image.vue'
  import MedicalSuccess from './success.vue'
  import XfInput from '../../../components/xf-input/xf-input.vue'
  import DefaultLayout from '../../../layouts/default-layout/default-layout'
  import {validate, arrToForm} from '../../../common/js/util'
  import {mapGetters} from 'vuex'
  export default {
    components: {
      DefaultLayout,
      XfInput,
      MedicalSuccess,
      UploadImage,
      HeaderBack},
    data() {
      return {
        form: {
          mobilePhone: '', // 手机号
          file1: '', // 身份证正面
          file2: '', // 身份证反面
          file3: '', // 社保卡正面
          file4: '', // 社保卡反面
          file5: '' // 养老权益单
        },
        status: 'form'
      }
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    methods: {
      onSubmit: function () {
        validate.call(this, this.form).then(() => {
          const list = [this.form.file1, this.form.file2, this.form.file3, this.form.file4, this.form.file5]
          const form = Object.assign({}, this.form, arrToForm(list, 'attachmentList'))
          this.$post('/admin/person/sapi/provincial/medical/treatment/save/sign', form, loading => {
            this.$message.loading(loading)
          }).then(res => {
            if (res.result === 1) {
              this.status = 'success'
            } else {
              this.$message.alert(res.message)
            }
          })
        })
      }
    },
    created() {
      this.form.mobilePhone = this.userInfo.aae005
    }
  }
</script>
<style scoped lang="scss">
  @import "../../../common/style/variable";
  .form{
    margin: .15rem 0 0 0;
  }
  .img-box{
    width: 100%;
    display: flex;
    text-align: center;
    .img-box-item{
      width: 2.5rem;
      padding: .2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .tip{
        margin: .2rem 0 0 0;
      }
    }
  }
</style>
